<template>
    <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="设备信息" name="first"></el-tab-pane>
          <el-tab-pane label="充电口管理" name="second"></el-tab-pane>
        </el-tabs>
        <el-descriptions :column="1" v-if="activeName == 'first'">
          <el-descriptions-item label="所属充电站">{{detail.stationName}}</el-descriptions-item>
          <el-descriptions-item label="状态">
              <template v-if="detail.status == 0">
                <el-tag type="danger">禁用</el-tag>
              </template>
              <template v-else-if="detail.status == 1">
                <el-tag type="success">启用</el-tag>
              </template>
          </el-descriptions-item>
          <el-descriptions-item label="充电桩编码">{{detail.code}}</el-descriptions-item>
          <el-descriptions-item label="运行状态">
              <template v-if="detail.runStatus == 0">
                <el-tag type="danger">离线</el-tag>
              </template>
              <template v-else-if="detail.runStatus == 1">
                <el-tag type="success">在线</el-tag>
              </template>
          </el-descriptions-item>
          <el-descriptions-item label="充电桩名称">{{detail.pileName}}</el-descriptions-item>
          <el-descriptions-item label="设备类型">{{detail.equipmentTypeName}}</el-descriptions-item>
        </el-descriptions>
        <el-table :data="detail.portList" style="width: 100%" v-else>
          <el-table-column prop="id" label="id" />
          <el-table-column prop="port" label="充电口">
              <template slot-scope="{row}">
                  {{row.port}}号枪
              </template>
          </el-table-column>
          <el-table-column label="工作状态">
            <template slot-scope="{row}">
              <template v-if="row.runStatus == 1">
                <span style="font-size: 16px;">空闲</span>
              </template>
              <template v-else-if="row.runStatus == 2">
                <template >
                  <span style="font-size: 16px;">充电</span>
                </template>
              </template>
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

<script>
  import * as api from "@/api/station/charging_pile";
  import { getDicts } from "@/api/system/dict/data";
  export default {
    name: 'Detail',
    dicts: [],
    props: {
      id: {
        required: true,
        type: Number
      },
    },
    data() {
      return {
        activeName:'first',
        detail:{},
      };
    },
    computed: {

    },
    mounted(){
      this.getDetail()
    },
    methods: {
      async getDicts(){//字典获取
        let res = await getDicts('charg_device_type')
        return res.data
      },
      getDetail (){
        api.getChargingPile(this.id).then(async response => {
          let deviceList = await this.getDicts()
          console.log('deviceList',deviceList)
          let data = response.data || {};
          let obj = deviceList.find(item1=>item1.dictValue == data.equipmentType)
          this.detail = {
            ...data,
            equipmentTypeName: obj ? obj.dictLabel : data.equipmentType
          }

        });
      }
    }
  }
</script>

<style lang="scss" scoped>
    #pane-first {
      :deep(.el-descriptions) {
        .el-descriptions__label {
          width: 100px;
          display: inline-block;
          text-align: right;
        }
      }
    }
</style>
